<template>
    <div class="hsa-adaptive-container" :class="HsaClass">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
    import { computed } from 'vue'

    // 组件配置
    defineOptions({
        name: 'HsaAdaptiveContainer'
    })

    // 组件属性
    const props = defineProps({
        // 判断整个页面是否超长出现滚动条，与 toolbar 配合可实现操作栏底部固定效果
        scrollbar: {
            type: Boolean,
            default: true
        }
    })

    // 计算属性：根据 scrollbar 动态设置类名
    const HsaClass = computed(() => ({
        'hsa-adaptive-container__scrollbar': props.scrollbar,

    }))
</script>

<style lang="scss">
    .hsa-adaptive-container {
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        // 判断整个页面是否超长出现滚动条，与 toolbar 配合可实现操作栏底部固定效果
        &__scrollbar {
            overflow-y: auto;

            // 优化滚动条样式
            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #dcdfe6;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-track {
                background-color: #f5f7fa;
            }
        }

        // 适配容器内部样式
        .hsa-adaptive-pane:nth-of-type(1) {
            margin-top: 0;
        }
    }
</style>